<template>
	<view class="cu-list menu-avatar">
		<view v-for="(item,index) in park" :key='index' class="cu-item" @click="detail(item)">
			<view class="cu-avatar radius bg-orange" style="width: 120rpx; height: 120rpx;border-radius: 16rpx;">
				<icon class="iconfont icon-tingchechang1" style="font-size: 64rpx;"></icon>
			</view>
			<view class="content margin-left padding-right">
				<text style="font-weight: 700;" class="ellipsis">{{item.name}}</text>
				<view class="text-gray text-sm flex" style="display:block;">
					<view>
						<icon class="iconfont icon-xingxing icon_size text-yellow" v-for="(item,index) in 5" :key="index"></icon>
						5.0分
					</view>
					<view>
						<icon class="iconfont icon-dizhi- icon_size text-blue"></icon>
						<text>{{item.address}}</text>
						<text class="align_r">距您 {{item.distance}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="text-gray text-df text-center padding-sm" v-if="isshow">没有更多数据</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				lat1:'',
				lng1:'',
				park:[],
				pageno: 1,
				isshow: false
			}
		},
		onReachBottom() {
			this.pageno = this.pageno + 1
			this.getHomeData();
		},
		onLoad(){
			uni.showLoading({
			    title: '加载中'
			});
			this.Location();
			setTimeout(() => {
				uni.hideLoading();
				this.getHomeData();
			},2000)
		},
		methods: {
			Location(){
				let _this = this;
				uni.getLocation({
				    type: 'gcj02',
				    success: function (res) {
						_this.lat1 = res.latitude;
						_this.lng1 = res.longitude;
				    }
				});
			},
			getHomeData(){
				let that = this;
				that.$request.getForm('/muid/kaid/park',{pageno:this.pageno}).then(
					res => {
						if(res.data.rows == 0 || res.data.rows.length == 0) {
							that.isshow = true;
						}
						var list = res.data.rows;
						for(var i= 0;i<list.length;i++) {
							//计算两坐标距离
							list[i].distance = that.getDistance(list[i].x,list[i].y,that.lng1,that.lat1)
							that.park.push(list[i])
						}
					},
				);
				
			},
			// 计算两个点之间的距离
			getDistance(lat1, lng1, lat2, lng2) {
				var radLat1 = lat1 * Math.PI / 180.0
				var radLat2 = lat2 * Math.PI / 180.0
				var a = radLat1 - radLat2
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
				Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
				s = s * 6378.137// EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				s = s * 1000
				if (isNaN(s)) {  
					return 0+'m';  
				}
				if (s > 1000) {
					//    大于1000米时
					s = Math.round(s/1000);
					s = s + '公里'
				} else {
					//    小于1000米直接返回
					s = Math.round(s) + '米'
				}
				return s
			},
			detail(item){
				uni.navigateTo({url:`/pages_serv/kaids/park-view?item=${JSON.stringify(item)}`});
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
	.cu-list.menu-avatar>.cu-item{
		height: 160rpx;
	}
	.cu-list.menu-avatar>.cu-item .content{
		width: calc(100% - 24rpx - 24rpx - 100rpx - 20rpx) !important;
	}
	.cu-item{
		/* margin: 24rpx 24rpx 0 24rpx; */
		border-radius: 16rpx;
	}
	.align_r{
		float: right;
		display: block;
	}
	.icon_size{
		font-size: 24rpx;
		display: inline-flex;
		margin-right: 12rpx;
	}
	.cu-item[data-v-46cd5a48]{
		border-radius: 0 !important;
	}
	.ellipsis{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		width: 400rpx;
		display: inline-block;
	}
</style>
